<template>
  <div>
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>任务{{rwjbDwType==0?'接收':'下发'}}</div>
        <div class="btn-chakan" @click="toCkrw(null)">查看任务</div>
      </div>
    </header>
    <div class="up"></div>
    <div class="contents">
      <div class="main_top">
        <table>
          <tr>
            <td colspan="5">{{hytz_title}}</td>
          </tr>
          <tr>
            <td>
              <div class="tit_width"></div>
            </td>
            <td>
              <div class="tit_width">已查阅</div>
            </td>
            <td>
              <div class="tit_width">未查阅</div>
            </td>
            <td>
              <div class="tit_width">已回执</div>
            </td>
            <td>
              <div class="tit_width">未回执</div>
            </td>
          </tr>
          <tr>
            <td width="50">
              <div class="tit_width">合计</div>
            </td>
            <td width="70">
              <div class="tit_width">{{ d.length }}</div>
            </td>
            <td width="70">
              <div class="tit_width">{{ e.length }}</div>
            </td>
            <td width="70">
              <div class="tit_width">{{ b.length }}</div>
            </td>
            <td width="70">
              <div class="tit_width">{{c.length }}</div>
            </td>
          </tr>
        </table>
        <div class="main-cont">
          <table>
            <tr v-for="(item, index) in dataList" :key="index" @click="toCkrw(item.dwid)">
              <td width="50">
                <div class="tit_width">{{ item.name }}</div>
              </td>
              <td width="70">
                <div class="tit_width">
                  <img v-if="item.isView === 1" src="../../assets/images/icon_yi_kan.png" alt="" class="imgs">
                </div>
              </td>
              <td width="70">
                <div class="tit_width">
                  <img v-if="item.isView === 0" src="../../assets/images/icon_yi_kan.png" alt="" class="imgs">
                </div>
              </td>
              <td width="70">
                <div class="tit_width" v-if="item.returnReceipt !== 1">
                  <img v-if="item.isReturn === 1" src="../../assets/images/icon_yi_kan.png" alt="" class="imgs">
                </div>
              </td>
              <td width="70">
                <div class="tit_width" v-if="item.returnReceipt !== 1">
                  <img v-if="item.isReturn === 0" src="../../assets/images/icon_yi_kan.png" alt="" class="imgs">
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dataList: [],
        id: '',
        b: [],
        c: [],
        d: [],
        e: [],
        userId: '',
        rwjbDwType: '',
        hytz_title: ''
      };
    },
    mounted() {
      var _this = this;
      // this.id = localStorage.getItem("rwjbId")?JSON.parse(localStorage.getItem("rwjbId")):null;
      // this.rwjbDwType = localStorage.getItem('rwjbDwType');
      // this.hytz_title = localStorage.getItem('hytz_title');
      // this.userId = localStorage.getItem('userId')
      // this.query();
    },
    beforeRouteEnter(to, from, next) {
      console.log(from)
      next((vm) => {
        vm.$nextTick(function () {
          vm.id = localStorage.getItem("rwjbId") ? JSON.parse(localStorage.getItem("rwjbId")) : null;
          vm.rwjbDwType = localStorage.getItem('rwjbDwType');
          vm.hytz_title = localStorage.getItem('hytz_title');
          vm.userId = localStorage.getItem('userId')
          if (from.path == "/rwjb_list" || from.path == "/") {
            vm.query();
          } else {
            // vm.init();
            setTimeout(() => {
              this.$nextTick(() => {
                // document.querySelector('#app').scrollTop = this.offsetTop;
                $(".main-cont").scrollTop(sessionStorage.getItem("table_listhree_scroll"))
              });
            }, 10)
          }
        });

      });
    },

    methods: {
      back() {//返回
        // this.$router.push("/rwjb_list");
        this.$router.back()
      },
      query() {
        let that = this;
        let params = {
          userId: this.userId,
          theNewTaskAssignId: that.id,
          isPostOrGet: this.rwjbDwType
        };
        that.axios.get(`${that.$global_msg.Url.host}/taskAssign/mettNotice`,
          { params }).then(res => {
            console.log(res)
            that.dataList = res.data.rows;
            let a = res.data.rows;
            console.log(a.length)
            if (a.length > 0) {
              that.b=[]
              that.c=[]
              that.d=[]
              that.e=[]
              a.map(res => {
                if (res.returnReceipt !== 1) {
                  if (res.isReturn === 1) {
                    that.b.push(res.isReturn)
                  } else {
                    that.c.push(res.isReturn)
                  }
                }
                if (res.isView === 1) {
                  that.d.push(res.isView)
                } else {
                  that.e.push(res.isView)
                }
              })
              that.$nextTick(function () {
                var h_gao = window.screen.height;
                var up_h = $('.up').outerHeight(true);
                var table_h = $('table').outerHeight(true);
                var height = h_gao - up_h - table_h - 20;
                $('.main-cont').css('max-height', height + 'px');
              });
            }
          })
      },
      toCkrw(dwid) {
        localStorage.removeItem('ckrw_dwid');
        if (dwid || dwid === 0) {
          localStorage.setItem("ckrw_dwid", dwid);
        }
        var t = $(".main-cont").scrollTop()
        console.log("距离：", t)
        sessionStorage.setItem("table_listhree_scroll", t)
        this.$router.push({
          path: '/ckrw',
          query: { id: this.id, type: '会议通知' }
        });
      },
    }
  }
</script>
<style scoped>
  * {
    color: #ffffff;
  }

  .imgs {
    width: 54px;
    height: 54px;
  }

  .main-cont {
    max-height: 11.5rem;
    overflow: hidden;
    overflow-y: auto;
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100000;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  .btn-chakan {
    position: absolute;
    right: 0.462962rem;
    font-size: 0.388888rem !important;
    bottom: 0;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .found {
    display: inline-block;
    margin-right: 0.37037rem;
  }

  .up {
    padding-top: 2.037037rem;
  }

  table {
    width: 100%;
    border: 1px solid #ffffff;
    margin: 0 auto;
    color: #ffffff;
    border-collapse: collapse;
    text-align: center;
    margin: 0;
  }

  th {
    height: 0.925926rem;
    margin-top: 1.111111rem;
    border: 1px solid #ffffff;
  }

  td {
    height: 1.25926rem;
    border: 1px solid #ffffff;
    border-right: none;
    /* border-bottom: none; */
  }

  .main_top {
    background: #7ac0fe;
  }

  .contents {
    width: 100%;
    margin: 0 auto;
    /* border-radius: 0.185185rem; */
    border-radius: 0.37037rem;
    overflow: hidden;
    padding: 0 0.37037rem;
    box-sizing: border-box;
  }

  .tits {
    text-align: center;
    color: #ffffff;
    padding-top: 0.185185rem;
    font-size: 0.407407rem;
    margin-bottom: 0.185185rem;
  }

  .left {
    width: 1.851852rem;
    /* background:#E5E5E5; */
    text-align: center;
    color: #ffffff;
  }

  .kuangt {
    width: 2.759259rem;
    height: 1.111111rem;
    line-height: 1.111111rem;
    /* border: 1px solid #ffffff; */
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    z-index: 10;
    /* display: inline-block; */
    box-sizing: border-box;
  }

  .kuangtTit {
    /* width:2.759259rem; */
    width: 2.6659259rem;
    height: 2.111111rem;
    line-height: 2.111111rem;
    /* border: 1px solid #ffffff; */
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    z-index: 10;
    /* display: inline-block; */
    box-sizing: border-box;
  }

  .kuangtTwo {
    width: 1.62rem;
    height: 2.111111rem;
    line-height: 2.111111rem;
    border-right: 1px solid #ffffff;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    z-index: 10;
    /* display: inline-block; */
    box-sizing: border-box;
  }

  .tit_width {
    display: flex;
    justify-content: center;
  }

  .nice {
    /* display: inline-block; */
    width: 6.851852rem;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 1.2rem;
  }

  .lefts {
    overflow: hidden;
    box-sizing: border-box;
    z-index: 100;
    /* border-right: 1PX solid #ffffff; */
  }

  .rights {
    width: 6.851852rem;
    /* overflow: auto;  */
  }

  .all {
    display: flex;
  }
</style>